<template>
  <div class="login">
    <div class="title">智慧E区后台管理系统</div>
    <div class="mask"></div>
    <div class="container">
      <div class="ititle">登录</div>
      <div class="content">
        <el-form
          label-position="top"
          label-width="100px"
          :model="loginFrom"
          style="margin: 0 auto; max-width: 280px"
        >
          <el-form-item label="账号：">
            <el-input
              v-model="loginFrom.userName"
              placeholder="请输入账户名"
              clearable
            />
          </el-form-item>
          <el-form-item label="密码：">
            <el-input
              v-model="loginFrom.passWord"
              placeholder="请输入密码"
              show-password
              type="password"
              @keydown.enter="toLogin"
            />
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          @click="toLogin"
          round
          style="margin-top: 45px; width: 100px"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive } from "vue";
import { mainStore } from "../store/index";

export default {
  name: "Login",
  setup() {
    const loginFrom = reactive({
      userName: "",
      passWord: "",
    });

    const store = mainStore();
    const toLogin = () => {
      store.login(loginFrom.userName, loginFrom.passWord);
    };

    return {
      loginFrom,
      toLogin,
    };
  },
};
</script>

<style scoped>
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("https://skygray.top/pic/images/2022/06/21/loginBg34af15f98e6b0c8a.jpg");
  background-size: 100% 100%;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
}
.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 230px;
  line-height: 230px;
  font-size: 1.8rem;
  color: #fff;
  font-weight: 600;
  vertical-align: top;
  z-index: 9;
}
.title img {
  width: 80px;
  height: 80px;
}
.ititle {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 1.3rem;
  font-weight: 500;
}
</style>
